<template>
  <div class="ctx">
    <el-button v-use-hover:[callBack]="render"> hover事件</el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Teleport from "../common/Teleport/index";
const vUseHover = {
  inserted: (el, binding) => {
    const { value: render, arg: positionCallBack } = binding;
    console.log(positionCallBack);
    // 在元素上做些操作
    el.mouseenterListener = el.addEventListener("mouseenter", () => {
      const position = positionCallBack(el.getBoundingClientRect());
      el.hoverRef = Teleport(render, position);
    });
    el.mouseleaveListener = el.addEventListener("mouseleave", () => {
      if (el.hoverRef) {
        el.hoverRef.close();
      }
    });
  },
  unbind: (el) => {
    if (el.mouseenterListener) {
      el.removeEventListener(el.mouseenterListener);
    }
    if (el.mouseleaveListener) {
      el.removeEventListener(el.mouseleaveListener);
    }
  },
};
const render = (h) => {
  return h(
    "div",
    {
      props: {
        type: "primary",
      },
      style: {
        "background-color": "red",
        transform: "scale(1.5)",
      },
    },
    ["主要按钮"]
  );
};
const callBack = (e) => {
  console.log(e);
  const position = {
    x: e.x,
    y: e.y - 20,
  };
  return position;
};
</script>

<style scoped lang='less'>
.ctx {
  width: 100%;
  height: 100%;
  background-color: antiquewhite;
  position: relative;
  .el-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>